<template>
  <div class="tools">
    <ul class="list">
      <li
        @click.stop="changeTool(item.type)"
        :class="{ active: item.type == tool }"
        v-for="(item, index) in tools"
        :key="index"
        :title="item.name"
      >
        <img :src="item.icon" :alt="item.name" />
      </li>
    </ul>
    <div class="color-box">
      <ul class="colors">
        <li :style="{ 'background-color': color1 }">
          <input
            @change="changeColor(color1, 0)"
            type="color"
            v-model="color1"
          />
        </li>
        <li :style="{ 'background-color': color2 }">
          <input
            @change="changeColor(color2, 1)"
            type="color"
            v-model="color2"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { toolType } from "../js/pxCanvas/tools/index";
import { changeColor } from "../js/pxCanvas/utils/index";
import icon_pen from "../assets/icon/pen.png";
import icon_eraser from "../assets/icon/eraser.png";
import icon_bucket from "../assets/icon/bucket.png";
import icon_tubes from "../assets/icon/tubes.png";
import icon_line from "../assets/icon/line.png";
import icon_rect from "../assets/icon/rect.png";
import icon_spray from "../assets/icon/spray.png";
import icon_brush from "../assets/icon/brush.png";


export default {
  data() {
    return {
      color1: "#000000",
      color2: "#ffffff",
      tool: toolType.PEN,
      tools: [
        {
          name: "pen",
          icon: icon_pen,
          type: toolType.PEN,
        },
        {
          name: "eraser",
          icon: icon_eraser,
          type: toolType.ERASER,
        },
        {
          name: "bucket",
          icon: icon_bucket,
          type: toolType.BUCKET,
        },
        {
          name: "tubes",
          icon: icon_tubes,
          type: toolType.TUBES,
        },
        {
          name: "brush",
          icon: icon_brush,
          type: toolType.BRUSH,
        },
        {
          name: "spray",
          icon: icon_spray,
          type: toolType.SPRAY,
        },
        {
          name: "line",
          icon: icon_line,
          type: toolType.LINE,
        },
        {
          name: "rect",
          icon: icon_rect,
          type: toolType.RECT,
        },
      ],
    };
  },
  mounted() {
    this.$bus.$on("changeColor", (colors) => {
      colors.forEach((c, i) => {
        if (c != "") this["color"+(i + 1)] = changeColor(c);
      });
    });
  },
  methods: {
    changeTool(type) {
      this.tool = type;
      this.$bus.$emit("tool", type);
    },
    changeColor(color, type) {
      this.$bus.$emit("color", { color, type });
    },
  },
  watch: {
    color1(v) {
      this.$bus.$emit("color", { color: v, type: 0 });
    },
    color2(v) {
      this.$bus.$emit("color", { color: v, type: 1 });
    },
  },
};
</script>

<style scoped lang="scss">
.color-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .colors {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    li {
      width: 45px;
      height: 45px;
      color: #000;
      border-radius: 2px;
      border: thin solid #fff;
      cursor: pointer;
      position: relative;
      input {
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }
      &:first-of-type {
        z-index: 2;
      }
      &:last-of-type {
        top: 25px;
        margin-left: -25px;
        z-index: 1;
      }
    }
  }
}

.tools {
  width: 132px;
  height: 100%;
  align-items: center;
  position: relative;
  z-index: 99;
  margin-right: auto;
  background: #753a88;
  .list {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 10px 2px;
    li {
      width: 64px;
      height: 64px;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      user-select: none;
      & > img {
        width: 50%;
        transition: 0.1s all;
        opacity: 0.95;
      }
      &.active {
        background: #8c60a5;
        & > img {
          transform: scale(1.2);
          opacity: 1;
        }
      }
    }
  }
}
</style>
